<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;">

        <el-form-item label="客户编号" prop="customerSerialnumber">
          <el-input
            v-model="queryForm.params.customerSerialnumber"
            placeholder="客户编号"
            style="width: 100px;"
          />
        </el-form-item>

        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryForm.params.customerName" placeholder="客户名称" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="费用类型" prop="cycle">
          <el-select
            v-model="queryForm.params.chargeType"
            placeholder="费用类型"
            style="width: 100px;">
            <el-option v-for="(item, index) in queryForm.chargeTypeList" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="统计周期" prop="cycle">
          <el-select
            v-model="queryForm.params.cycle"
            placeholder="统计周期"
            style="width: 100px;">
            <el-option v-for="(item, index) in queryForm.cycleList" :key="index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item :label="queryForm.dateName" prop="date">
          <!--   日   -->
          <el-date-picker
            style="width: 120px"
            v-if="queryForm.params.cycle == 0"
            v-model="queryForm.params.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日">
          </el-date-picker>
          <!--   月   -->
          <el-date-picker
            v-if="queryForm.params.cycle == 1"
            v-model="queryForm.params.date"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择月">
          </el-date-picker>
          <el-select
            v-if="queryForm.params.cycle == 2"
            v-model="queryForm.params.date"
            placeholder="选择季度"
            style="width: 100px;">
            <el-option v-for="(item, index) in queryForm.dateList" :key="index" :label="item.name" :value="item.value"/>
          </el-select>
          <!--   年   -->
          <el-date-picker
            v-if="queryForm.params.cycle == 3"
            v-model="queryForm.params.date"
            type="year"
            value-format="yyyy"
            placeholder="选择年">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="支付方式" prop="payway">
          <el-select
            v-model="queryForm.params.payway"
            placeholder="支付方式"
            style="width: 100px;">
            <el-option v-for="(item, index) in queryForm.paywayList" :key="index" :label="item.name" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="收费渠道" prop="paychannel">
          <el-select
            v-model="queryForm.params.paychannel"
            placeholder="收费渠道"
            style="width: 100px;">
            <el-option v-for="(item, index) in queryForm.paychannelList" :key="index" :label="item.name" :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleFormSubmit">
            <d2-icon name="search"/>
            查询
          </el-button>
          <el-button
            type="success"
            @click="exportList">
            <d2-icon name="download"/>
            导出
          </el-button>
        </el-form-item>

      </el-form>
    </template>
    <split-pane :min-percent='10' :max-percent='20' :default-percent='20' split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
          :form-options="formOptions">
        </d2-crud>
      </template>
    </split-pane>

  </d2-container>
</template>

<script>
import MyAreaTree from '@/components/my-area-tree'
import dayjs from "dayjs";
export default {
  name: 'customer',
  components: { MyAreaTree },
  data () {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      queryForm: {
        params: {
          areaId: '',
          chargeType: '0', // 费用类型
          customerSerialnumber: '', // 客户编号
          customerName: '', // 客户名称
          cycle: '0', // 统计周期
          date: '', // 时间
          payway: '', // 支付方式
          paychannel: '' // 收费渠道
        },
        chargeTypeList: [
          {
            name: '缴费',
            id: '0'
          },
          {
            name: '退费',
            id: '1'
          }
        ],
        cycleList: [
          {
            name: '日',
            id: '0'
          },
          {
            name: '月',
            id: '1'
          },
          {
            name: '季',
            id: '2'
          },
          {
            name: '年',
            id: '3'
          }
        ],
        dateName: '',
        dateList: [
          { name: '第一季度', value: '0' },
          { name: '第二季度', value: '1' },
          { name: '第三季度', value: '2' },
          { name: '第四季度', value: '3' }
        ],
        paywayList: [
          { name: '现金', value: '0' },
          { name: '微信', value: '1' },
          { name: '支付宝', value: '2' },
          { name: '系统', value: '3' }
        ],
        paychannelList: [
          { name: '物业', value: '0' },
          { name: '移动终端', value: '1' },
          { name: '费用核算', value: '2' }
        ]
      },
      treeData: null,
      columns: [
        {
          title: '序号',
          key: 'serialNum'
        },
        {
          title: '客户编号',
          key: 'customerSerialnumber',
          sortable: true
        },
        {
          title: '客户名称',
          key: 'customerName',
          sortable: true
        },
        {
          title: '支付方式',
          key: 'payway',
          sortable: true
        },
        {
          title: '金额',
          key: 'fee',
          sortable: true
        },
        {
          title: '时间',
          key: 'payTime',
          sortable: true
        },
        {
          title: '收据编码',
          key: 'receNumber',
          sortable: true
        }
      ],
      data: [],
      formOptions: {
        labelWidth: '80px',
        labelPosition: 'left',
        saveLoading: false
      }
    }
  },
  watch: {
    'queryForm.params.cycle': {
      handler (val, oval) {
        if (val === 2 || val === '2') {
          this.queryForm.params.date = '0'
        } else {
          this.queryForm.params.date = ''
        }
        console.log(this.queryForm.cycleList)
        this.queryForm.dateName = `选择${this.queryForm.cycleList[val].name}`
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.getPageList();
  },
  methods: {
    async exportList () {
      const res = await this.$api.finance_exportChargeListExcel(this.queryForm.params)
      const url = window.URL.createObjectURL(new Blob([res]))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', '客户费用记录.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) // 下载完成移除元素
      window.URL.revokeObjectURL(url) // 释放blob对象
      console.log(res)
    },
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.getPageList()
    },
    onAreaChange (data, node) {
      this.queryForm.params.areaId = data.id
      this.pagination.currentPage = 1
      this.getPageList()
    },
    // 获取收费统计列表
    async getPageList () {
      const res = await this.$api.finance_getChargeListPageVO({
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        ...this.queryForm.params
      })
      if (res && res.columns) {
        const { data } = res
        this.data = data
        this.pagination.total = res.total
        this.loading = false
      }
      return res
    },
    handleFormSubmit () {
      this.pagination.currentPage = 1
      this.getPageList()
    }
  }
}
</script>
